<template>
<div class="article-manage">
    <el-row :gutter="10">
        <el-col :span="18">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-card shadow="hover" class="card-style">
                        <el-row :gutter="10">                          
                            <el-col :span="6" class="tag-text" @click.native="article">
                                <el-button  type="primary" icon="el-icon-reading" circle></el-button>
                                <el-button type="text" class="typeface">文章管理</el-button>
                            </el-col>
                            <el-col :span="6" class="tag-text" @click.native="classify">
                                <el-button type="info" icon="el-icon-coin" circle></el-button>
                                <el-button type="text" class="typeface">分类管理</el-button>
                            </el-col>
                            <el-col :span="6" class="tag-text" @click.native="tag">
                                <el-button type="info" icon="el-icon-set-up" circle></el-button>
                                <el-button type="text" class="typeface">标签管理</el-button>
                            </el-col>
                            <el-col :span="6" class="tag-text" @click.native="comment">
                                <el-button type="warning" icon="el-icon-chat-square" circle></el-button>
                                <el-button type="text" class="typeface">评论管理</el-button>
                            </el-col>
                        </el-row>                
                    </el-card>
                </el-col>
                <el-col :span="12">
                   <el-card shadow="hover" class="card-style">
                     <el-row :gutter="10">                          
                            <el-col :span="6" class="tag-text">
                                <el-badge :value="120" class="item">
                                <el-button type="success" icon="el-icon-s-data" circle></el-button>
                                </el-badge>
                                <el-button type="text" class="typeface">总访问量</el-button>
                            </el-col>
                            <el-col :span="6" class="tag-text">
                                <el-badge :value="12" class="item">
                                <el-button type="success" icon="el-icon-s-order" circle></el-button>
                                </el-badge>
                                <el-button type="text" class="typeface">月访问量</el-button>
                            </el-col>
                            <el-col :span="6" class="tag-text">
                                <el-badge :value="12" class="item">
                                   <el-button type="info" icon="el-icon-tickets" circle></el-button>
                                </el-badge>
                                <el-button type="text" class="typeface">最新评论</el-button>
                            </el-col>
                            <el-col :span="6" class="tag-text">
                                <el-badge value="new" class="item">
                                   <el-button type="warning" icon="el-icon-info" circle></el-button>
                                </el-badge>
                                <el-button type="text" class="typeface">最新反馈</el-button>
                            </el-col>
                        </el-row>        
                    </el-card>
                </el-col>
            </el-row>
             <el-row :gutter="10" class="card-two-row">
                <el-col :span="24">
                    <el-card shadow="hover" class="card-style">
                     <div id="map" style="width:100%;height:278px;float:left;"></div>
                     <button @click="clickCircle" id="circle">圆</button>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="card-two-row">
                <el-col :span="24">
                    <el-card shadow="hover" class="card-style">
                     <div id="myChart" style="width:100%;height:278px;float:left;"></div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="card-two-row">
                <el-col :span="24">
                    <el-card shadow="hover">
                     <div id="myChart2" style="width:100%;height:278px;float:left;"></div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="card-two-row">
                <el-col :span="24">
                    <el-card shadow="hover">
                     <div id="myChart3" style="width:100%;height:278px;float:left;"></div>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="6">
             <el-row :gutter="10">
                <el-col :span="24" >
                    <el-card shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>标签</span>
                            <el-button icon="el-icon-price-tag" style="float: right; padding: 3px 0" type="text"></el-button>
                        </div>
                        <el-tag>标签一</el-tag>
                        <el-tag type="success">标签二</el-tag>
                        <el-tag type="info">标签三</el-tag>
                        <el-tag type="warning">标签四</el-tag>
                        <el-tag type="danger">标签五</el-tag>
                    </el-card>
                </el-col>
            </el-row>
             <el-row :gutter="12" class="card-two-row">
                <el-col :span="24">
                   <el-card shadow="hover">
                       <div slot="header" class="clearfix">
                            <span>最新文章</span>
                            <el-button icon="el-icon-price-tag" style="float: right; padding: 3px 0" type="text"></el-button>
                        </div>
                       <el-row :gutter="10">
                           <el-col :span="24" >
                              <el-tag>标签一</el-tag>
                           </el-col>
                           <el-col :span="24" >
                              <el-tag type="success">标签二</el-tag>
                           </el-col>
                           <el-col :span="24" >
                              <el-tag type="info">标签三</el-tag>
                           </el-col>
                           <el-col :span="24" >
                              <el-tag type="warning">标签四</el-tag>
                           </el-col>
                       </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    
</div>

</template>
<script>
export default{
    name:'Home',
    data(){
        return{
            value: '',
            value:9,
            value2:50,
            value3:70,
            value4:29,
            myChart: '',
            opinionData2: [
                { value: 1, name: '科幻类', itemStyle: 'red' },
                { value: 45, name: '玄幻类', itemStyle: '#1FC48D' },
                { value: 3, name: '人文地理', itemStyle: '#6DC8EC' },
                { value: 3, name: '技术知识', itemStyle: '#3F8FFF' }
            ],
            lineData:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            map:""
        }
    },
    mounted:function(){
        this.drawLine();
        this.histogram();
        this.brokenLine();
        this.loadMap();
    },
    methods:{
        //绘制圆形区域的函数
        createGeoJSONCircle:function(center, radiusInKm, points) {
            if(!points) points = 64;
            var coords = {
                latitude: center[1],
                longitude: center[0]
            };
            var km = radiusInKm;
            var ret = [];
            var distanceX = km/(111.320*Math.cos(coords.latitude*Math.PI/180));
            var distanceY = km/110.574;

            var theta, x, y;
            for(var i=0; i<points; i++) {
                theta = (i/points)*(2*Math.PI);
                x = distanceX*Math.cos(theta);
                y = distanceY*Math.sin(theta);

                ret.push([coords.longitude+x, coords.latitude+y]);
            }
            ret.push(ret[0]);
            return {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [ret]
                }
            };

        },
        clickCircle:function(){
            let _this=this
            debugger
          _this.map.getCanvas().style.cursor = 'crosshair';
            // e.stopPropagation();
            // clearLayerAndSource();
             if (_this.map.getLayer('circle')) {
                _this.map.removeLayer('circle')
            }
            if (_this.map.getSource('circle')) {
                _this.map.removeSource('circle');
            }
            var isDraws = true;
            // 禁止双击缩放
            _this.map.doubleClickZoom.disable();
            var radius=0;
            var jsonCircle = {
                'type': 'FeatureCollection',
                'features': []
            };
            let _pixelRadius=0;
            var source = _this.map.getSource('circle');
            if(source){
                //map.getSource('circle').setData(jsonCircle);
            }else{
                _this.map.addSource('circle', {
                    type: 'geojson',
                    data: jsonCircle
                });
                _this.map.addLayer({
                    "id": "circle",
                    "type": "fill",
                    "source": "circle",
                    "layout": {
                    },
                    "paint": {
                        
                        "fill-color": "#e6205e",
                    
                    }

                });
            }
            var points = [];
            var starCoords=[];
            let isMousemove=false;
            let isFilst=true;
            let filstCoords=[];
            _this.map.on('click', function (_e) {
                if(isDraws){
                    starCoords=[];
                    starCoords.push(_e.lngLat.lat);
                    starCoords.unshift(_e.lngLat.lng);
                    if(isFilst){
                    filstCoords=starCoords;
                    isFilst=false
                    }
                    points.push(starCoords);
                    _this.map.getSource('circle').setData(_this.createGeoJSONCircle(starCoords, 0));
                    isMousemove=true;
                    isDraws=true;
                }
            })
            var moveCoords=[]
            _this.map.on('mousemove', function (_e) {
                if(isDraws && isMousemove){
                    isDraws=true;
                    var centerCoords=[]
                    moveCoords=[_e.lngLat.lng, _e.lngLat.lat];
                    if(filstCoords.length !=0){
                        centerCoords=[(parseFloat(filstCoords[0])+parseFloat(moveCoords[0]))/2,(parseFloat(filstCoords[1])+parseFloat(moveCoords[1]))/2];
                        var _points = [];
                        _points.push(moveCoords)
                        _points.unshift(filstCoords);
                        var line = _this.mturf.lineString(_points);
                        var len = _this.mturf.length(line);
                        if(len < 1) {
                            _pixelRadius=len
                        } else {
                            //km
                            len = len.toFixed(2);
                            _pixelRadius=len
                        _this.map.getSource('circle').setData(_this.createGeoJSONCircle(filstCoords, len));
                        }
                    }
                }
            })
            _this.map.on('dblclick', function (_e) {
                if(isDraws){
                   _this.map.getCanvas().style.cursor = 'grab'
                    jsonCircle = {
                        'type': 'FeatureCollection',
                        'features': []
                    };
                    //map.getSource('circle').setData(jsonCircle);
                    isMousemove=false
                    isDraws=false;
                    _this.map.getCanvas().style.cursor = '';
                    var endCoords=[_e.lngLat.lng, _e.lngLat.lat];
                    if(filstCoords.length !=0){

                        var _points = [];
                        _points.push(moveCoords)
                        _points.unshift(filstCoords);
                        var line = _this.mturf.lineString(_points);
                        var len = _this.mturf.length(line);
                        if(len < 1) {
                        _pixelRadius=len
                        }else{
                        len = len.toFixed(2);
                        _pixelRadius=len
                        _this.map.getSource('circle').setData(_this.createGeoJSONCircle(filstCoords, len));
                        }
                    }
                }

            })
        },
        loadMap:function(){
             this.mbgl.accessToken = 'pk.eyJ1Ijoienh0d24iLCJhIjoiY2twaTU2cmF5MGJjdjJ2b2Y4ZXJ6aG95NiJ9.9jhZqBT-eoz7eikqteJoNg';
            this.map = new this.mbgl.Map({
                container: 'map',
                maxZoom: 18,
                minZoom: 0,
                zoom: 10,
                center: [109.1699, 45.9719],
                style: 'mapbox://styles/mapbox/streets-v11',
                attributionControl: false
            }); 
   
        },
        //文章管理
        article:function(){
            this.$router.push({path:'/index/article'});
        },
        //分类管理
        classify:function(){
            this.$router.push({path:'/index/classify'});
        },
        //标签管理
        tag:function(){
            this.$router.push({path:'/index/tag'})
        },
        //评论管理
        comment:function(){
            this.$router.push({path:'/index/comment'})
        },
        //饼状图
        drawLine:function() {
            this.myChart = this.$echarts.init(document.getElementById('myChart'))
            this.myChart.setOption({
                title: {
                text: '文章分类管理分析', // 主标题
                subtext: '', // 副标题
                x: 'left' // x轴方向对齐方式
                },
                grid: { containLabel: true },
                tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {d}%'
                },
                color: ['red', '#1FC48D', '#6DC8EC', '#3F8FFF'],
                legend: {
                orient: 'vertical',
                icon: 'circle',
                align: 'left',
                x: 'right',
                y: 'bottom',
                data: ['科幻类', '玄幻类', '人文地理', '技术知识']
                },
                series: [
                {
                    name: '科幻类',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    center: ['40%', '50%'],
                    itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    color: function (params) {
                        // 自定义颜色
                        var colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                        return colorList[params.dataIndex]
                    }
                    },
                    data: this.opinionData2
                }
                ]
            })
        },
        brokenLine:function(){
            var chartDom = document.getElementById('myChart3');
            var myChart =this.$echarts.init(chartDom);
            var option;
            option = {
                title:{
                    text:'访问总量'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }]
            };
            option.xAxis.data=this.lineData;
            myChart.setOption(option);

        },
        //柱状图
        histogram:function() {
            var chartDom = document.getElementById('myChart2');
            var myChart =this.$echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '访问量',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新增访问', '次访问']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '新增访问',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '次访问',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        markPoint: {
                            data: [
                                {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                                {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

        }          
    }
}
</script>
<style>

.article-manage{
    height: 100%;
    margin-left:5px;
    margin-top:5px;
    overflow-x: hidden;
    overflow-y: auto;
}
.card-two-row{
    margin-top:10px
}
.card-style{
    text-align:center;
}
.el-card__header {
    padding: 5px 20px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
}
.tag-text{
    display:flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
}
.typeface{
    color:#303133
}
.el-tag{
    margin-top:5px;
}

</style>